<template>
    <view class="container">
        <div class="border">
            <div class="border-content">
                <div style="height: 10px;"></div>
                <!-- 表单展示 -->
                <div class="card">
                    <div style="width: 90%;margin-left: 5%;">
                        <div style="height: 10px;"></div>
                        <div style="font-size: 18px;font-weight: 500;">{{
                            flag == false ? '修改巡检' : '派发巡检'
                            }}</div>
                        <div style="height: 10px;"></div>
                        <u-line color="#f1f1f1"></u-line>
                        <div style="height: 10px;"></div>
                        <!-- <div>
                            <div>巡检点名称</div>
                            <div style="height: 15rpx;"></div>
                            <div class="borders">
                                <input style="height: 42px;" v-model="form.inspectName" placeholder="请输入" type="text">
                            </div>
                        </div>
                        <div style="height: 10px;"></div> -->
                        <div>
                            <div>设备编号</div>
                            <div style="height: 15rpx;"></div>
                            <div class="borders">
                                <picker @change="bindDeviceChange" :value="index" :range="deList">
                                    <input style="height: 42px;" type="text" v-model="form.inspectName"
                                        placeholder="请选择设备" disabled>
                                </picker>
                            </div>
                        </div>
                        <div style="height: 10px;"></div>
                        <div>
                            <div>开始日期</div>
                            <div style="height: 15rpx;"></div>
                            <div class="borders">
                                <picker mode="date" :value="date" @change="bindDateChange">
                                    <input style="height: 42px;" v-model="form.dateBegin" disabled placeholder="请选择"
                                        type="text">
                                </picker>
                            </div>
                        </div>
                        <div style="height: 10px;"></div>
                        <div>
                            <div>结束日期</div>
                            <div style="height: 15rpx;"></div>
                            <div class="borders">
                                <picker mode="date" :value="date" @change="bindDateChanges">
                                    <input style="height: 42px;" v-model="form.dateEnd" disabled placeholder="请选择"
                                        type="text">
                                </picker>
                            </div>
                        </div>
                        <div style="height: 10px;"></div>
                        <div>
                            <div>开始时间</div>
                            <div style="height: 15rpx;"></div>
                            <div class="borders">
                                <picker mode="time" :value="time" @change="bindTimeChange">
                                    <input style="height: 42px;" v-model="form.timeBegin" placeholder="请选择" disabled
                                        type="text">
                                </picker>
                            </div>
                        </div>
                        <div style="height: 10px;"></div>
                        <div>
                            <div>结束时间</div>
                            <div style="height: 15rpx;"></div>
                            <div class="borders">
                                <picker mode="time" :value="time" @change="bindTimeChanges">
                                    <input style="height: 42px;" v-model="form.timeEnd" placeholder="请选择" disabled
                                        type="text">
                                </picker>
                            </div>
                        </div>
                        <div style="height: 10px;"></div>
                        <div>
                            <div>所属部门</div>
                            <div style="height: 15rpx;"></div>
                            <div class="borders">
                                <picker @change="bindDept" :value="index" :range="deptList">
                                    <input placeholder="请选择" style="height: 42px;" v-model="form.deptName" disabled
                                        type="text">
                                </picker>
                            </div>
                        </div>
                        <div style="height: 10px;"></div>
                        <div>
                            <div>间隔</div>
                            <div style="height: 15rpx;"></div>
                            <div class="borders">
                                <input style="height: 42px;" v-model="form.inspectInterval" type="text">
                            </div>
                        </div>
                        <div style="height: 10px;"></div>
                        <div>
                            <div>巡检要求</div>
                            <div style="height: 15rpx;"></div>
                            <div class="borders">
                                <input style="height: 42px;" v-model="form.inspectRequirement" type="text">
                            </div>
                        </div>
                    </div>
                    <div style="height: 20px;"></div>
                </div>
                <div style="height: 30rpx;"></div>
                <div class="footer">
                    <div class="button-footer" @click="submitInfo">{{ flag == false ? '保存' : '确定' }}</div>
                </div>
                <div style="height: 30rpx;"></div>
                <div class="footer">
                    <div class="button-footers" @click="delInfo" v-if="!flag">删除</div>
                </div>
                <div style="height: 30rpx;"></div>
            </div>
        </div>
    </view>
</template>
<script>
import { getDeptList, deviceList, typeList, detail, addInspectPoint, updateInspectPoint, inspectDel } from '../api/api.js';
export default {
    data() {
        const currentDate = this.getDate({
            format: true
        })
        return {
            flag: true,
            ordTypeList: ['自派单', '手工单'],
            ordType: '',
            date: currentDate,
            dates: currentDate,
            time: '',
            //巡检
            repairForm: {
                orderPersonId: '',
                orderPersonName: '',
                inspectId: '',
                inspectName: '',
                inspectContent: '',
                taskDescription: '',
            },
            indent: '',
            deptList: [],
            seadeptList: [],
            deList: [],//设备列表
            deSeaList: [],//设备搜索
            mainTypeList: ['维修', '保养'],
            degreeList: ['一般紧急', '很紧急', '非常紧急'],
            stateArr: ['正常', '停用'],
            bed: [],
            seaBen: [],
            userlist: [],
            seaUserlist: [],
            xunjian: [],
            seaXunjian: [],
            timeS: '请选择开始时间',
            timeSS: '请选择结束时间',
            exUserList: [],
            seaExUserList: [],
            //知识库
            flagId: '',
            editInfo: {},
            banklist: [],
            seaBanlist: [],
            form: {
                id: '',
                deptId: '',
                deptName: "",
                inspectNo: '',
                inspectName: "",
                inspectRequirement: '',
                inspectInterval: "",
                dateBegin: "",
                dateEnd: "",
                timeBegin: "",
                timeEnd: "",
                deviceName: '',
                deviceId: ''
            },
            info: {}
        }
    },
    methods: {
        //删除巡检点
        delInfo() {
            let that = this;
            uni.showModal({
                title: '提示',
                content: '确认删除当前巡检点?',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        inspectDel(that.info.id).then(res => {
                            console.log(res.data);
                            if (res.data.code == 200) {
                                uni.showToast({
                                    title: res.data.msg,
                                    icon: 'none'
                                })
                                setTimeout(() => {
                                    uni.navigateBack({ delta: 1 })
                                }, 2000)
                            }

                        })
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },
        cancelPage() {
            uni.navigateBack({
                delta: 1
            })
        },
        //部门列表
        getgetDeptList() {
            getDeptList({}).then(res => {
                console.log(res.data, '部门列表');
                this.deptList = res.data.rows.map((item) => item.deptName);
                this.seadeptList = res.data.rows;
            })
        },
        //设备列表
        getDevice() {
            deviceList().then(res => {
                console.log(res.data.data, '设备列表');
                this.deList = res.data.data.map((item) => item.deviceName);
                this.deSeaList = res.data.data;
            })
        },
        //选择部门
        bindDept(e) {
            const value = e.detail.value;
            this.form.deptName = this.seadeptList[value].deptName;
            this.form.deptId = this.seadeptList[value].id;
        },
        //选择设备
        bindDeviceChange(e) {
            const value = e.detail.value;
            console.log(this.deSeaList[value]);
            this.form.inspectNo = this.deSeaList[value].deviceNo;
            this.form.inspectName = this.deSeaList[value].deviceName;
            this.form.deviceId = this.deSeaList[value].id;
            console.log(this.form.inspectNo, 'this.form.inspectNo');
        },
        submitInfo() {
            console.log(this.form);
            if (!this.info.id) {
                addInspectPoint({
                    deviceId: this.form.deviceId,
                    deptId: this.form.deptId,
                    deptName: this.form.deptName,
                    inspectNo: this.form.inspectNo,
                    inspectName: this.form.inspectName,
                    inspectRequirement: this.form.inspectRequirement,
                    inspectInterval: this.form.inspectInterval,
                    dateBegin: this.form.dateBegin,
                    dateEnd: this.form.dateEnd,
                    timeBegin: this.form.timeBegin,
                    timeEnd: this.form.timeEnd,
                    bindCode: '3213122'
                }).then(res => {
                    console.log(res.data, '添加巡检');
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: res.data.msg,
                            icon: 'none'
                        });
                        setTimeout(() => {
                            this.clearForm();
                            uni.navigateBack({ delta: 1 })
                        }, 2000)
                    }
                })
            } else {
                //编辑
                updateInspectPoint({
                    id: this.form.id,
                    deviceId: this.form.deviceId,
                    deptId: this.form.deptId,
                    deptName: this.form.deptName,
                    inspectNo: this.form.inspectNo,
                    inspectName: this.form.inspectName,
                    inspectRequirement: this.form.inspectRequirement,
                    inspectInterval: this.form.inspectInterval,
                    dateBegin: this.form.dateBegin,
                    dateEnd: this.form.dateEnd,
                    timeBegin: this.form.timeBegin,
                    timeEnd: this.form.timeEnd,
                    bindCode: '3213122'
                }).then(res => {
                    console.log(res.data, '添加巡检');
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: res.data.msg,
                            icon: 'none'
                        });
                        setTimeout(() => {
                            this.clearForm();
                            uni.navigateBack({ delta: 1 })
                        }, 2000)
                    }
                })
            }

        },
        cancel() {
            uni.navigateBack({ delta: 1 })
        },
        bindDateChange: function (e) { //选择日期
            this.form.dateBegin = e.detail.value
        }, bindDateChanges: function (e) { //选择日期
            this.form.dateEnd = e.detail.value
            console.log('date', this.date)
        }, bindTimeChange: function (e) {
            this.form.timeBegin = e.detail.value + ':00'
        }, bindTimeChanges: function (e) {
            this.form.timeEnd = e.detail.value + ':00'
            console.log(this.form.timeEnd, 'this.form.timeEnd');

        },
        getDate(type) { //年月日
            const date = new Date();
            // const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        },
        clearForm() {
            this.form = {
                id: '',
                deptId: '',
                deptName: "",
                inspectNo: '',
                inspectName: "",
                inspectRequirement: '',
                inspectInterval: "",
                dateBegin: "",
                dateEnd: "",
                timeBegin: "",
                timeEnd: "",
                deviceName: ''
            };
        }
    },
    onShow() {
        this.indent = uni.getStorageSync('pageIndent');
        this.getDevice();
        this.getgetDeptList();
        //常用量
        typeList().then(res => {
            console.log(res);
            let id = res.data.data.find((item) => item.constantName == "故障类型");
            detail({ id: id.id }).then((res) => {
                console.log(res, "故障类型");
                this.bed = res.data.data.map((item) => item.constantName);
                this.seaBen = res.data.data;
            });
        });

    },
    onLoad(options) {
        if (options.info) {
            this.flag = false;
            this.info = JSON.parse(options.info)
            let e = JSON.parse(options.info);
            if (e.id) {
                this.form = {
                    id: e.id,
                    deptId: e.deptId,
                    deptName: e.deptName,
                    inspectNo: e.inspectNo,
                    inspectName: e.inspectName,
                    inspectRequirement: e.inspectRequirement,
                    inspectInterval: e.inspectInterval,
                    dateBegin: e.dateBegin,
                    dateEnd: e.dateEnd,
                    timeBegin: e.timeBegin,
                    timeEnd: e.timeEnd,
                    deviceName: e.deviceName,
                    deviceId: e.deviceId
                }
            }
        } else {
            this.flag = false;
        }

    }
}
</script>
<style lang="scss">
.newFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.container {
    background: #f3f3f3;

    .border {
        border-radius: 10px;
        background: #f3f3f3;
        height: 100vh;
        overflow-y: scroll;

        .border-content {
            width: 90%;
            margin-left: 5%;
        }
    }
}

.card {
    background: #fff;
    border-radius: 10px;
}

.top-line {
    display: flex;
    align-items: center;
}

.line {
    background: #1A512C;
    width: 7rpx;
    height: 35rpx;
}

.maps {
    border: 2px solid #1A512C;
    overflow: hidden;
    border-radius: 10px;
}

.form-flex {
    display: flex;
    align-items: center;
    width: 100%;
}

.borders {
    border: 1px solid #000000;
    border-radius: 5px;
    text-align: center;
}

.border-max {
    border: 1px solid #1A512C;
    border-radius: 5px;
    text-align: center;
    width: 100%;
}

.borders-min {
    border: 1px solid #1A512C;
    border-radius: 5px;
    text-align: center;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.button-footer {
    width: 95%;
    margin-left: 2.5%;
    height: 50px;
    background: #000000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 10px;
}

.button-footers {
    width: 95%;
    margin-left: 2.5%;
    height: 50px;
    background: red;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 10px;
}

.flex {
    display: flex;
    align-items: center;
}

.addIcon {
    border-radius: 50%;
    border: 1px solid #1A512C;
    font-weight: 500;
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
</style>